<template>
  <section id="Header-Cpn">
    <header class="title-ctn"><span>lyc后台管理系统</span></header>
    <div class="operation-ctn">
      <div class="operation-username-ctn">
        <Icon size="20" type="md-person"/>
        <span>{{ userInfo.username?userInfo.username:"暂无用户名" }}</span>
      </div>
      <div class="operation-username-ctn">
        <Icon size="20" type="md-people"/>
        <span>{{ userInfo.roleName?userInfo.roleName:"暂无角色名" }}</span>
      </div>
      <div class="operation-logout-ctn" @click="doLogOutFun">
        <Icon size="20" type="md-log-out"/>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  data () {
    return {
      userInfo: {}
    }
  },
  created () {
    let params = JSON.parse(sessionStorage.getItem("userInfo"))
    this.userInfo.username = params.username
    this.userInfo.roleName = params.roleInfo.map((item) => {
      return item.roleName
    }).join(",")
  },
  methods: {
    doLogOutFun() {
      this.$Modal.confirm({
        title: "是否要退出系统？",
        onOk: () => {
          sessionStorage.setItem('web-token', '')
          sessionStorage.setItem('userInfo', '')
          window.location.href = '/#/login'
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
#Header-Cpn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px 0 10px;
  width: 100%;
  height: 8%;
  background-color: #ffffff;
  border-radius: 10px;
  overflow-x: hidden;
  .title-ctn {
    width: 20%;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 16px;
  }
  .operation-ctn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 80%;
    height: 100%;
    .operation-username-ctn {
      text-align: end;
      margin-left: 15px;
      span {
        margin-left: 5px;
      }
    }
    .operation-logout-ctn {
      width: 6%;
      text-align: end;
    }
  }
}
</style>
